<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>圣杯布局</title>
		<style type="text/css">
			.wrap{
				display: flex;
			}
			.content{
				width:100%;
				height:100px;
				background-color: red;
				flex: 1;
				/*
				 * flex：（默认值：0 1 auto）flex-grow, flex-shrink 和 flex-basis的简写
				 * flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
				 * flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
				 * flex-basis：（auto）定义了在分配多余空间之前，项目占据的主轴空间（main size）
				 * */
			}
			.left{
				width:100px;
				height: 100px;
				background-color: blue;
			}
			.right{
				width:100px;
				height:100px;
				background-color: pink; 
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="left">left</div>
			<div class="content">content</div>
			<div class="right">right</div>
		</div>
	</body>
</html>
